<template>
  <div class="flex v-align-c cursor-p">
    <div v-if="showKuaiDiNiaoIcon" class="mar-r-20 platform-img platform-1" :class="platformType === 999 ? 'actived' : ''" @click="doChange(999)">
      <img src="https://veekrayimg.joinsun.vip/images/logo-kuaidiniao.png" />
    </div>
    <div v-if="showDouYinIcon" class="mar-r-20 platform-img platform-1" :class="platformType === 1 ? 'actived' : ''" @click="doChange(1)">
      <img src="https://veekrayimg.joinsun.vip/images/douyin-logo.png" />
    </div>
    <div v-if="showKuaiShouIcon" class="mar-r-20 platform-img platform-2" :class="platformType === 2 ? 'actived' : ''" @click="doChange(2)">
      <img src="https://veekrayimg.joinsun.vip/images/logo-kuaishou-2.png" />
    </div>
    <div v-if="showTaoBaoIcon" class="mar-r-20 platform-img platform-2" :class="platformType === 3 ? 'actived' : ''" @click="doChange(3)">
      <img src="https://veekrayimg.joinsun.vip/images/logo-taobao-2.png" />
    </div>
    <div v-if="showPinDuoDuoIcon" class="mar-r-20 platform-img platform-2" :class="platformType === 4 ? 'actived' : ''" @click="doChange(4)">
      <img src="https://veekrayimg.joinsun.vip/images/logo-pingdd-2.png" />
    </div>
    <div v-if="showTmallIcon" class="mar-r-20 platform-img platform-2" :class="platformType === 5 ? 'actived' : ''" @click="doChange(5)">
      <img src="https://veekrayimg.joinsun.vip/images/TMALL-logo.png" />
    </div>
    <div v-if="showAmazonIcon" class="mar-r-20 platform-img platform-2" :class="platformType === 6 ? 'actived' : ''" @click="doChange(6)">
      <img src="https://veekrayimg.joinsun.vip/images/Amazon-logo.png" />
    </div>
    <div v-if="showAlibabaIcon" class="mar-r-20 platform-img platform-2" :class="platformType === 7 ? 'actived' : ''" @click="doChange(7)">
      <img src="https://veekrayimg.joinsun.vip/images/1688-logo.jpg" />
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      showDouYinIcon: {
        type: Boolean,
        default: true
      },
      showKuaiShouIcon: {
        type: Boolean,
        default: true
      },
      showTaoBaoIcon: {
        type: Boolean,
        default: true
      },
      showPinDuoDuoIcon: {
        type: Boolean,
        default: true
      },
      showTmallIcon: {
        type: Boolean,
        default: true
      },
      showKuaiDiNiaoIcon: {
        type: Boolean,
        default: false
      },
      showAmazonIcon: {
        type: Boolean,
        default: () => {
          return window.location.host !== 'e.joinsun.vip'
        }
      },
      showAlibabaIcon: {
        type: Boolean,
        default: true
      },
      defaultPlatformType: {
        type: Number,
        default: () => {
          return 1
        }
      }
    },
    data() {
      return {
        // 平台类型
        platformType: ''
      }
    },
    mounted() {
      const queryParams = this.getCurrentPage().query
      this.platformType = this.defaultPlatformType
      // 链接参数最优先
      if (queryParams.platformType) {
        this.platformType = queryParams.platformType * 1
      }
    },
    methods: {
      // 平台类型切换事件
      doChange(platformType) {
        if (this.platformType === platformType) return
        this.platformType = platformType
        this.$emit('platformTypeChange', this.platformType)
      }
    }
  }
</script>

<style lang="less" scoped>
  .platform-img {
    img {
      width: 181px;
      height: 92px;
      border:1px solid #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(200, 200, 200, 0.3);
    }
    &:hover{
      img{
        border: 1px solid #409eff;
        box-shadow: 0px 2px 8px 0px rgba(125, 189, 255, 0.3);
      }
    }
  }
  .platform-img {
    &.actived {
      img {
        border: 1px solid #409eff;
        box-shadow: 0px 2px 8px 0px rgba(125, 189, 255, 0.3);
      }
    }
  }
</style>
